<template>
	<view class="m-image  " :class="[className]" :style="[style]" @click="click">
		<image class="images" v-show="isLoad" @click="previewImage" :lazy-load="true" :style="[style]" @load="onLoads" :mode="mode" :src="urls" @error="onErrors"></image>
		<!-- //加载中 -->
		<view class="van-skeleton--animate" v-show="!isLoad" :style="[style]"></view>
		<!-- <m-icon  type="btn-spin" : :wh="style.width+' '+style.height"></m-icon> -->
	</view>
</template>

<script>
	/**
	 * m-button 
	 * @description 按钮
	 *  property { String } 		src				图片地址
	 *  property { Boolean } 		isPreview		是否开启点击预览
	 *  property { String } 		types			失败时的默认展示图片
	 *  property { String } 		size			宽高 默认30
	 *  property { String } 		mode			裁剪模式  同官方
	 */
	const imagedefault = require('@/static/images/UI/imagedefault.png')
	const logo = require('@/static/images/pages/icon/logo.png')
	import mixin from "../../libs/mixin/mixin.js"
	export default {
		mixins: [mixin],
		name: "m-image",
		data() {
			return {
				urls: this.src,
				isLoad: false,
			}
		},
		props: {
			className: {
				default: '',
				type: String,
			},
			src: "",
			isPreview: {
				type: Boolean,
				default: false //是否可预览图片
			},
			types: {
				type: String,
				default: 'defalut' //defalut默认展位图   goods商品占位图    user用户占位图
			},
			radius: {
				type: String,
				default: '10' //defalut默认展位图   goods商品占位图    user用户占位图
			},
			mode: {
				type: String,
				default: 'aspectFill',
				/**
				 * 缩放
				 * scaleToFill   --- 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
				 * aspectFit   --- 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
				 * aspectFill   --- 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
				 * widthFix   --- 宽度不变，高度自动变化，保持原图宽高比不变
				 * heightFix   --- 高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3。
				 * 裁剪
				 * bottom，center，left，right，top left，top right，bottom left，bottom right
				 */
			},
		},
		watch: {
			src(val) {
				if(val == '00'){
					return this.urls = logo
				}
				this.urls = val
			},
		},
		computed: {
			defaultImg() {
				return {
					'defalut': imagedefault,
				} [this.types]
			},
		},
		methods: {
			previewImage() {
				if (this.urls && this.isPreview) {
					uni.previewImage({
						urls: [this.urls],
					});
				}
			},
			onLoads(e) {
				this.isLoad = true;
			},
			onErrors(e) {
				this.urls = this.defaultImg
				this.isLoad = false;
			},
			click() {
				this.$emit('click')
			},
		},
	}
</script>

<style lang="scss">
	.m-image {
		position: relative;
		display: block;
		.images {
			width: 100%;
			height: 100%;
		}
	}


	.van-skeleton--animate {
		background: linear-gradient(90deg, #f2f2f2 25%, #ebebeb 37%, #f2f2f2 63%);
		background-size: 400% 100%;
		animation: van-skeleton-blink 1.4s ease infinite;
	}

	@keyframes van-skeleton-blink {
		0% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0 50%;
		}
	}
</style>